<template>
  <div>
    <CheckboxGroup v-model="newval">
      <CellGroup>
        <div v-for="item,index in allRecord">

          <Cell :title="item.value.display_name" @click="onchecked(index,item)" clickable>
            <template #right-icon>
              <Checkbox :name="item.value.id" ref="checkboxes"></Checkbox>
            </template>
          </Cell>
        </div>
      </CellGroup>
    </CheckboxGroup>
    <Button @click="onAdd">新建</Button>
    <Button @click="newval=[]">清除</Button>
    <Button @click="$router.back()">取消</Button>
    <Button @click="onOk">确定</Button>
    <div style="font-size: 5px">PageMany</div>
  </div>
</template>

<script>
  import gql from 'graphql-tag'
  import {ActionSheet, Button, Cell, CellGroup, Checkbox, CheckboxGroup, Popup} from 'vant';

  export default {
    name: 'PageMany',
    components: {ActionSheet, Cell, Popup, Button, Checkbox, CheckboxGroup, CellGroup},
    data: function () {
      return {
        searchText: '',
        tablePage: {
          currentPage: 1,
          pageSize: 10
        },
        order: '',
        domain: [],
        allRecord: [],
        model: '', id: 0, type: 'many2one', field: {}, newval: [], emit_name: ''
      }
    },
    watch: {
      $route(to, from) {
        console.info(to, from)
        if (to.name === 'pagemany') {
          this.model = this.$route.query.model
          this.id = this.$route.query.id
          this.field = this.$route.query.field
          this.newval = this.$route.query.ids.cval || []
          this.type = this.$route.query.type
          this.emit_name = this.$route.query.emit_name
        }
      }
    },
    computed: {},
    apollo: {
      allRecord: {
        query: gql`query qdv($model:String,$domain:String!,$queryFields:[String],$order:String,$limit:Int,$offset:Int){
                   allRecord:allRecord(model:$model,domain:$domain,fields:$queryFields,order:$order,limit:$limit,offset:$offset){
            value
          }
         }`,
        variables() {
          return {
            model: this.field.relation,
            domain: JSON.stringify(this.domain),
            offset: ((this.tablePage.currentPage - 1) * this.tablePage.pageSize) || 0,
            order: this.order,
            limit: this.tablePage.pageSize,
            queryFields: ['id', 'display_name']
          }
        },
        skip() {
          return !(this.field && this.field.relation)
        }
      }
    },
    mounted: function () {
      this.model = this.$route.query.model
      this.id = this.$route.query.id
      this.field = this.$route.query.field
      this.newval = this.$route.query.ids.cval || []
      this.type = this.$route.query.type
      this.emit_name = this.$route.query.emit_name
      this.$EventBus.$on(this.model, (ids) => {
        this.$apollo.queries.allRecord.refetch()
      })
    },
    methods: {
      getNewData: function () {
        this.domain = [["name", "ilike", this.searchText]]  //JSON.parse( this.$route.query.field.domain).append 字符串
      }, onchecked(index, item) {
        this.$refs.checkboxes[index].toggle();
      },
      onAdd() {
        this.$router.push({name: 'pagenewform', query: {model: this.field.relation, emit_name: this.model}})
      },
      onOk() {
        this.$EventBus.$emit(this.emit_name, this.newval)
        this.$router.back()
      }
    }
  }
</script>

<style type="less">
  .flex {
    display: flex;
  }

  .vux-popup-radio-popup {
    background-color: #fff;
  }
</style>
